<template>
  <div class="container">
    <div v-if="isShow">
    <div class="note">房主已离开</div>
    <div class="note1">你可以</div>
    <div class="btnDiv">
      <button class="btn1" @click="toBattle">参加排位赛</button>  
    </div>
    <div class="btnDiv">
      <button class="btn" open-type="share">另开一局</button> 
    </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false
    }
  },
  mounted () {
    if (this.isShow === false) {
      this.openDialog()
      this.isShow = true
    }
  },
  methods: {
    openDialog () {
      wx.showModal({
        title: '提示',
        content: '房主已经离开房间',
        showCancel: false,
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
            // this.isShow = true
          }
        }
      })
    },
    toBattle () {
      wx.navigateTo({
        url: '../wait/main'
        // 进入排位赛界面
      })
    }
  },
  onShareAppMessage: function (ops) {
    if (ops.from === 'button') {
    // 来自页面内转发按钮
      console.log(ops.target)
    }
    return {
      // 这里是定义转发的标题
      title: '答题对战',
      // 这里是定义转发的地址
      path: '/pages/index/main',
      desc: '好友对战，快来体验一下吧~',
      imageUrl: '/static/images/shared.png',
      success: function (res) {
        // 转发成功
        console.log('转发成功:' + JSON.stringify(res))
        wx.navigateTo({
          url: '../waitFriends/main'
        // 进入对战等待界面
        })
      },
      fail: function (res) {
        // 转发失败
        console.log('转发失败:' + JSON.stringify(res))
      }
    }
  }
}
</script>

<style>
.note {
  color: white;
  /* margin: 0 auto; */
  text-align: center;
  padding: 100px 0px 0px 0px;
  font: 25px FZYaoti,KaiTi;
}
.note1 {
  color: white;
  /* margin: 0 auto; */
  text-align: center;
  padding: 50px 0px;
  font: 25px FZYaoti,KaiTi;  
}

.btnDiv {
  padding: 10px 60px;
}

.btn {
  border-radius: 30px;
  box-shadow: 0 9px #999;
  font-family: YouYuan;
}

.btn:hover {
  background-color: aliceblue;
}

.btn:active {
  background-color: aliceblue;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.btn1 {
  background-color: rgb(123, 158, 178);
  border-radius: 30px;
  box-shadow: 0 9px rgb(85, 100, 110);
  color:white;
  font-family: YouYuan;
}

.btn1:hover {
  background-color: rgb(123, 158, 178);
}

.btn1:active {
  background-color: rgb(123, 158, 178);
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>

